@charset "utf-8";
@import "reset";
@import "common";
 
.indexWeb{
    width: 100%;
    height: 100%;
    background: url(../img/back.png) no-repeat center center/cover;
    .header{
      width:r(50);
      height: r(50);
       @include aImg;
       right: r(40);
       top: r(40);
       position: absolute;
       animation:play 2s linear infinite both;
       -webkit-animation:play 2s linear infinite both;
       .yin1{
           
       }
       .yin2{
           display: none;
       }
    }
    position:relative;
    overflow: hidden;
    .content{
        width: r(420);
        height: r(540);
        @include abCenter;
        text-align: center;
        
        .logo{
            width: r(240);
            height: r(60);
            margin: 0 auto;
            position: relative;
            @include aImg;
            -webkit-animation:bounceInLeft 1s  linear both;
        }
        p{
            font-size: r(90);
            color: #e7c598;
        }
        p:nth-of-type(1){
            -webkit-animation:bounceInLeft 1.5s  linear both;
        }
        p:nth-of-type(2){
            -webkit-animation:bounceInLeft 2.2s  linear both;
        }
       
        button{
            
            width: r(318);
            height: r(45);
            line-height: r(45);
            &:first-of-type{
                margin: r(90) 0 r(30);
            }
            text-align:center;
            background: url(../img/index/btnBackground.png) no-repeat center center/cover;
            color: #e4b990;
            font-size: r(24);
            outline: none;
        }
        button:nth-of-type(1){
            animation:bounceInLeft 2.8s  linear both;
        }
        button:nth-of-type(2){
            animation:bounceInLeft 2.1s .7s linear both;
        }
    }
    .shade{
        display: none;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.5);
        position: absolute;
        top: 0;
        left: 0;
        .text{
            width: r(414);
            height: r(250);
            margin: 0 auto;
            background: #e7c598;
            @include abCenter;
            border-radius: r(10);
            color: #bf0c21;
            font-size: r(24);
            text-align: center;
            padding: r(35) 0;
            box-sizing: border-box;
            animation:zoomIn .4s  linear both;
            .close{
                width: r(40);
                height: r(40);
                position: absolute;
                right: r(15);
                top:r(10);
                img{
                    width: 100%;
                }
            }
            p{
                line-height: 1.5;
            }
            button{
                width: r(200);
                line-height: r(42);
                background: #bf0c21;
                color: #e7c598;
                margin-top: r(35);
                border-radius: r(10);
            }
        }
    }
}
@keyframes play{
    0%  {
        transform:rotate(0deg);
        }
    100%{
        transform:rotate(360deg);
       }
   }
    
        
        

